<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    var cas=document.getElementById('cas');
    var ctx=cas.getContext('2d');
    var padding=30;
    var x0=padding,y0=cas.height-padding;
    var arrowHeight=20,arrowWidth=10;
    var maxX=cas.width-padding*2-arrowHeight,
        maxY=cas.height-padding*2-arrowHeight;
    //绘制直线
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0+maxX+arrowHeight,y0);
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0,y0-maxY-arrowHeight);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x0+maxX+arrowHeight,y0);
    ctx.lineTo(x0+maxX,y0-arrowWidth/2);
    ctx.lineTo(x0+maxX+arrowHeight/2,y0);
    ctx.lineTo(x0+maxX,y0+arrowWidth/2);
    ctx.closePath();
    //绘制Y的
    ctx.moveTo(x0,padding);
    ctx.lineTo(x0-arrowWidth/2,padding+arrowHeight);
    ctx.lineTo(x0,padding+arrowHeight/2);
    ctx.lineTo(x0+arrowWidth/2,padding+arrowHeight);
    ctx.closePath();
    ctx.fill();

    //绘制点
    //绘制dara1中的点
    var data1=[[10,20],[15,13,[]]]
</script>
</html>